<template>
  <div id="schoolList" style="width: 91%; height: 350px"></div>
</template>

<script>
// import * as echarts from 'echarts';

export default {
  mounted() {
    // console.log(this.echarts);
    var myChart = this.$echarts.init(document.getElementById("schoolList"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: '学校月发布消息'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['东北大学', '华东大学', '华中大学', '西北大学', '华南大学']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '东北大学',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210, 336, 155, 332, 323, 403]
        },
        {
          name: '华东大学',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310, 331, 234, 333, 454, 444]
        },
        {
          name: '华中大学',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410, 182, 191, 234, 290, 330]
        },
        {
          name: '西北大学',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320, 452, 280, 560, 445, 666]
        },
        {
          name: '华南大学',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320, 1500, 1733, 1600, 1500, 1700]
        }
      ]
    });
  },
  methods: {
    // 数据刷新
    pageUpdate() {
      console.log(this.dynamicSortZZTOption.series[0].data);
      this.dynamicSortZZTOption.series[0].data = this.sortData;
      for (let i = 0; i < this.sortData.length; ++i) {
        if (Math.random() > 0.9) {
          this.sortData[i] += Math.round(Math.random() * 2000);
        } else {
          this.sortData[i] += Math.round(Math.random() * 200);
        }
      }
      this.myChart.setOption(this.dynamicSortZZTOption);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  }
};

</script>

<style lang="scss" scoped>
#schoolList {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 12px #ebedf0;
  margin: auto;
  padding: 15px 20px;
}
</style>